<template>
	<view>
		<view class="comment  z-padding-24 z-radius-24 z-margin-b-24">
		  <view class="comment_item_top">
		    <view class="comment_item_top_left">
		      <image class="comment_item_img z-margin-r-16" :src="cdn(info.user.avatar)" mode="" />
		      <view class="comment_item_top_left_text">
		        <view>匿名用户</view>
		        <view class="z-margin-t-16 z-font-24 text_999">{{info.createtime | date('yyyy-mm-dd hh:MM')}}</view>
		      </view>
		    </view>
		    <view class="comment_item_top_right">
		      <!-- <van-rate value="{{ info.score }}" color='#FF9600' readonly bind:change="onChangerate" /> -->
			  <!-- <u-rate :count="info.score" current="5"></u-rate> -->
		    </view>
		  </view>
		  <view class="lable-box z-margin-t-24">
		    <view class="label z-flex z-margin-r-8 z-margin-b-8 z-padding-lr-24 z-font-24"
		      v-for="(item,index) in tool.split(info.comment_label)">{{item}}</view>
		  </view>
		  <view class="comment_content z-margin-tb-24 z-font-24 z-font-w">
		    {{info.content}}
		  </view>
		  <view class="scroll_box">
		    <image :src="cdn(item)" @tap="previewImages(index)" v-for="(item,index) in info.images"
		     class="scroll_box_img z-radius-24" mode="aspectFill" />
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['info'],
		data() {
			return {
				
			}
		},
		methods: {
			previewImages(e){
			    util.previewImage(this.info.images, e)
			},
		}
	}
</script>

<style>
.comment{
  background-color: #fff;
  box-sizing: border-box;
}
.comment_item_top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.comment_item_top_left{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment_item_top_left_text{
  display: flex;
  flex-direction: column;
}

.comment_item_img{
  width: 66rpx;
  height: 66rpx;
  border-radius: 50%;
}
.scroll_box{
  flex-wrap: wrap;
}
.scroll_box_imgbox{
  display: flex;
}
.scroll_box_img{
  width: 190rpx;
  height: 190rpx;
  margin-right: 24rpx;
  margin-bottom: 24rpx;
}
.scroll_box_img:nth-of-type(3n){
  margin-right: 0;
}

.lable-box{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.label{
  height: 56rpx;
  background: #F5F7F9;
  color: #647390;
}
</style>
